<!-- quant-static -->
<template>
    <div class="static-wrapper">
        <!-- 头部筛选 -->
        <div class="static-filter top-filter">
            <el-row :gutter="20">
                <el-col :span="4">
                    <treeselect
                    placeholder="请选择部门"
                    :normalizer="normalizer"
                    @select="changeSelectDept"
                    v-model="value"
                    :options="depts" />
                </el-col>
                <el-col :span="4">
                    <el-select
                    value-key="userId"
                    v-model="user"
                    clearable
                    filterable
                    :filter-method="userFilter"
                    placeholder="请选择人员">
                        <el-option
                        v-for="item in users"
                        :key="item.userId"
                        :label="item.username"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-date-picker
                    class="sp-date"
                    value-format="yyyy-MM"
                    v-model="dateRange"
                    type="month"
                    placeholder="选择月份">
                    </el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-button
                    type="text"
                    class="sp-text-btn"
                    @click="handleQuery"
                    icon="el-icon-search"
                    :loading="searching"
                    >查询</el-button>
                </el-col>
                <el-col :span="4">
                    <p class="static-num">人员统计： <span> {{ totolUser }} </span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;任务统计： <span> {{ totolTask }} </span></p>
                </el-col>
            </el-row>
        </div>
        <div class="static-main">
            <div class="static-list">
                <!-- 表格 -->
                <div class="static-table">
                    <template v-if="active === 0">
                        <el-table
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.6)"
                        :data="tableData"
                        border
                        @row-click="handleRowClick"
                        height="100%"
                        style="width: 100%;">
                            <!--ACTCOUNT: 14
                            COUNT: 30
                            MONTH: "2021-10"
                            ORGID: 110
                            USERID: 0
                            USERNAME: "super" -->
                            <el-table-column
                            prop="USERNAME"
                            label="用户名">
                            </el-table-column>

                            <el-table-column
                            prop="MONTH"
                            label="日期">
                            </el-table-column>

                            <el-table-column
                            prop="COUNT"
                            label="量化数量">
                            </el-table-column>

                            <el-table-column
                            prop="ACTCOUNT"
                            label="实际完成数量">
                            </el-table-column>

                            <el-table-column
                            label="完成百分比">
                                <template slot-scope="scope">
                                    {{ getPercent(scope.row.ACTCOUNT, scope.row.COUNT) }}
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>

                    <template v-if="active === 1">
                        <el-table
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.6)"
                        :data="tableData"
                        border
                        @row-click="handleRowClick"
                        height="100%"
                        style="width: 100%;">

                        <!-- ACTCOUNT: 14
                        COUNT: 30
                        MONTH: "2021-10"
                        TASKTYPE: "ATP"-->
                        <el-table-column
                        prop="TASKTYPE"
                        label="任务类型">
                        </el-table-column>

                        <el-table-column
                        prop="MONTH"
                        label="时间">
                        </el-table-column>

                        <el-table-column
                        prop="COUNT"
                        label="量化数量">
                        </el-table-column>

                        <el-table-column
                        prop="ACTCOUNT"
                        label="实际完成数量">
                        </el-table-column>

                        <el-table-column
                        label="完成百分比">
                            <template slot-scope="scope">
                                {{ getPercent(scope.row.ACTCOUNT, scope.row.COUNT) }}
                            </template>
                        </el-table-column>

                        </el-table>
                    </template>

                </div>
                <!-- 分页 -->
                <div class="static-page">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="totalNum">
                    </el-pagination>
                </div>
            </div>

            <div class="static-task">
                <!-- 详情 -->
                <div class="static-info">
                    <div class="static-info-title">
                        任务详情
                        <el-button
                        type="text"
                        icon="el-icon-plus"
                        @click="addNewTask"
                        class="sp-text-btn"
                        style="float: right;">
                            新建
                        </el-button>
                    </div>
                    <div class="static-info-list">
                        <el-table
                        v-loading="infoLoading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.6)"
                        :data="infoList"
                        border
                        height="100%"
                        style="width: 100%;">
                            <!--actcount: 2
                            count: 10
                            id: "1"
                            month: "2021-10"
                            orgid: 7
                            remark: null
                            tasktype: 1
                            type: null
                            userid: 0
                            username: "super" -->
                            <el-table-column
                            prop="username"
                            fixed="left"
                            label="用户名">
                            </el-table-column>

                            <el-table-column
                            fixed="left"
                            label="任务类型">
                                <template slot-scope="scope">
                                    {{ showtaskTypes(scope.row.tasktype) }}
                                </template>
                            </el-table-column>

                            <el-table-column
                            prop="month"
                            label="日期">
                            </el-table-column>

                            <el-table-column
                            prop="count"
                            label="量化数量">
                            </el-table-column>

                            <el-table-column
                            prop="actcount"
                            label="实际完成数量">
                            </el-table-column>

                            <el-table-column
                            label="完成百分比">
                                <template slot-scope="scope">
                                    {{ getPercent(scope.row.actcount, scope.row.count) }}
                                </template>
                            </el-table-column>

                            <el-table-column
                            label="是否启用">
                                <template slot-scope="scope">
                                    {{ scope.row.state === 0 ? '启用' : '停用' }}
                                </template>
                            </el-table-column>

                            <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                                <template slot-scope="scope">
                                    <el-button
                                    @click="handleEdit(scope.row)"
                                    type="text"
                                    size="medium">
                                    编辑
                                    </el-button>
                                    <el-button
                                    @click="handleRemove(scope.row)"
                                    type="text"
                                    size="medium">
                                    删除
                                    </el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="static-page">
                    <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage1"
                    :page-sizes="[10, 20]"
                    :page-size="pageSize1"
                    layout="total, sizes, prev, pager, next"
                    :total="totalNum1">
                    </el-pagination>
                </div>
            </div>

        </div>

        <!-- 新增修改任务弹窗 -->
        <el-dialog
        width="70%"
        class="modifyModal"
        :title="taskTitle"
        :visible.sync="taskVisible">
            <el-form
            :rules="rules"
            ref="ruleForm"
            :model="taskForm">
                <el-row :gutter="80">
                    <el-col :span="12">
                        <el-form-item
                        label="部门"
                        :label-width="formLabelWidth">
                            <treeselect
                            placeholder="请选择部门"
                            :normalizer="normalizer"
                            @select="changeSelectDept"
                            v-model="taskForm.orgid"
                            :options="depts" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                        prop="username"
                        label="人员"
                        :label-width="formLabelWidth">
                            <el-select
                            value-key="userId"
                            clearable
                            filterable
                            :filter-method="userFilter"
                            v-model="taskForm.username"
                            placeholder="请选择人员">
                                <el-option
                                v-for="item in users"
                                :key="item.userId"
                                :label="item.username"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="80">
                    <el-col :span="12">
                        <el-form-item
                        prop="taskType"
                        label="任务类型"
                        :label-width="formLabelWidth">
                            <el-select
                            clearable
                            v-model="taskForm.taskType"
                            placeholder="请选择任务类型">
                                <el-option
                                v-for="item in taskTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                        prop="count"
                        label="量化数量"
                        :label-width="formLabelWidth">
                            <el-input
                            placeholder="请输入量化数量"
                            type="text"
                            v-model="taskForm.count"
                            clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="80">

                    <el-col :span="12">
                        <el-form-item
                        prop="actcount"
                        label="实际完成"
                        :label-width="formLabelWidth">
                            <el-input
                            placeholder="请输入实际完成数量"
                            type="text"
                            v-model="taskForm.actcount"
                            clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                        prop="month"
                        label="时间"
                        :label-width="formLabelWidth">
                            <el-date-picker
                            value-format="yyyy-MM"
                            v-model="taskForm.month"
                            type="month"
                            placeholder="选择月份">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="80">
                    <el-col :span="12">
                        <el-form-item label="备注"
                        :label-width="formLabelWidth">
                            <el-input
                            placeholder="请输入备注"
                            type="textarea"
                            v-model="taskForm.remark"
                            clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用"
                        :label-width="formLabelWidth">
                            <el-select
                            clearable
                            v-model="taskForm.state"
                            placeholder="请选择是否启用">
                                <el-option
                                v-for="item in taskStates"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="taskVisible = false">取 消</el-button>
                <el-button
                :loading="submitting"
                type="primary"
                @click="handleConfirmTask">
                确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect';
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import {
    getList, // 按照用户请求列表
    createNewTask, // 新增修改任务
    removeTask, // 删除任务
    getUsers, // 获取人员
    getOrgs, // 获取组织
    getTaskInfo, // 获取任务详情
    getDict, // 字典数据
} from '@/apis';
// 引入数学运算
import $Math from '@/utils/math';

export default {
    name: 'quant-static',
    components: {
        Treeselect,
    },
    props: {
        // 来自父组件 tab切换高亮值的变化
        active: {
            type: Number,
            default: 0,
        },
    },
    watch: {
        // 重置数据
        active() {
            Object.assign(this.$data, this.$options.data.call(this));
            this.queryOrgs();
            this.queryList();
        },
        // 重置表单
        taskVisible(newVal, oldVal) {
            if (!newVal) {
                this.taskForm = this.$options.data().taskForm;
                /* this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                }); */
            }
        },
        // user为空 默认显示前20数据
        user(newVal, oldVal) {
            if (!newVal) {
                this.users = this.userTemp;
            }
        },
    },
    data() {
        const validateNum = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入计划完成数量'));
            } else if (!(!Number.isNaN(value) && value >= 0)) {
                callback(new Error('请输入有效数字!'));
            } else {
                callback();
            }
        };
        const validateNum1 = (rule, value, callback) => {
            if (!(!Number.isNaN(value) && value >= 0)) {
                callback(new Error('请输入有效数字!'));
            } else {
                callback();
            }
        };
        return {
            // 是否启用下拉数据
            taskStates: [{
                value: 0,
                label: '启用',
            }, {
                value: 1,
                label: '停用',
            }],
            // 默认部门为7时 需要请求用户 这个时标志 之请求一次
            requestUser: 0,
            // 人员列表loading
            loading: false,
            // 任务详情loading
            infoLoading: false,
            // 列表数据
            tableData: [{
                date: '2021-10-30 10:20:06',
            }, {
                date: '2021-10-30 10:20:06',
            }],
            // 任务详情列表数据
            infoList: [],
            // 任务详情请求参数
            taskInfoType: null,
            // 任务详情请求参数 用户id
            taskInfoUser: null,
            // 点击表格弹出的表格数据
            gridData: [],
            // 组织节点选中的节点
            value: 7,
            value1: null,
            // 所有的组织树节点
            depts: [],
            // 页码
            currentPage: 1,
            // 每页显示数量
            pageSize: 10,
            // 列表总数量
            totalNum: 0,
            // 页码
            currentPage1: 1,
            // 每页显示数量
            pageSize1: 10,
            // 列表总数量
            totalNum1: 0,
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children,
                };
            },
            // 用户下拉数据
            users: [],
            users1: [],
            // 选中的用户
            allUsers: [],
            user: null,
            user1: null,
            // 选中的时间 默认是月份
            dateRange: null,
            // 是否正在搜索
            searching: false,
            // 是否显示点击表格弹窗
            dialogTableVisible: false,
            // 用户统计总数
            totolUser: 0,
            // 任务统计总数
            totolTask: 0,
            //  任务分类 1-报告 2-作业
            types: [{
                label: '报告',
                value: 1,
            }, {
                label: '作业',
                value: 2,
            }],
            // 任务类型
            taskTypes: [{
                label: 'ATP',
                value: 1,
            }, {
                label: 'BTM',
                value: 2,
            }, {
                label: 'CIR',
                value: 3,
            }, {
                label: 'TCR',
                value: 4,
            }, {
                label: 'LKJ',
                value: 5,
            }, {
                label: '外观',
                value: 6,
            }, {
                label: '一级修',
                value: 7,
            }, {
                label: '二级修',
                value: 8,
            }, {
                label: '高级修',
                value: 9,
            }, {
                label: '数据分析',
                value: 10,
            }],
            // 显示新增还是修改的title
            taskTitle: '新增任务',
            // 是否显示新增修改任务弹窗
            taskVisible: false,
            formLabelWidth: '100px',
            // 新增修改表单
            taskForm: {
                orgid: null,
                username: null,
                // type: null,
                taskType: null,
                count: null,
                actcount: null,
                month: null,
                remark: null,
                state: null,
            },
            // 新增修改表单验证
            rules: {
                /* type: [
                    { required: true, message: '请选择任务分类', trigger: 'change' },
                ], */
                username: [
                    { required: true, message: '请选择用户', trigger: 'change' },
                ],
                taskType: [
                    { required: true, message: '请选择任务类型', trigger: 'change' },
                ],
                count: [
                    {
                        validator: validateNum, required: true, trigger: 'blur',
                    },
                ],
                actcount: [
                    {
                        validator: validateNum1, trigger: 'blur',
                    },
                ],
                month: [
                    { required: true, message: '请选择时间', trigger: 'change' },
                ],
            },
            // 新增按钮loading
            submitting: false,
            // 点击编辑删除时的taskid
            taskid: null,
            // 暂存前20条用户数据
            userTemp: [],
        };
    },
    methods: {
        // 翻译任务类型
        showtaskTypes(tasktype) {
            return this.taskTypes[tasktype - 1].label;
        },

        // 获取百分比
        getPercent(a, b) {
            let result;
            if (!Number.isNaN(a) && !Number.isNaN(b)) {
                const divide = $Math.divide(a, b);
                const percent = $Math.multiply(divide, 100);
                const res = !Number.isNaN(percent) ? Number(percent) : 0;
                result = `${res.toFixed(2)}%`;
            } else {
                result = '--';
            }
            return result;
        },

        // 获取人员
        queryUser(orgid) {
            const params = {
                orgid,
            };
            getUsers(params).then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.allUsers = data;
                    this.userFilter();
                }
            }).catch((err) => {
                window.console.log(err);
            });
        },

        // 筛选用户
        userFilter(query = '') {
            const arr = this.allUsers.filter((item) => item.username.includes(query));
            if (arr.length > 20) {
                this.users = arr.slice(0, 20);
                this.userTemp = arr.slice(0, 20);
            } else {
                this.users = arr;
            }
        },

        // 获取组织
        queryOrgs() {
            // window.console.log();
            if (window.sessionStorage.getItem('allorg')) {
                this.depts = JSON.parse(window.sessionStorage.getItem('allorg'));
                return;
            }
            getOrgs().then((res) => {
                // window.console.log('获取组织', res);
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const str = JSON.stringify(data);
                    window.sessionStorage.setItem('allorg', str);
                    this.depts = data;
                }
            }).catch((err) => {
                window.console.log(err);
            });
        },

        // 获取组织之后需要去请求获取人员
        changeSelectDept(n, i) {
            // window.console.log('n,i', n, i);
            this.taskForm.taskType = null;
            this.queryUser(n.id);
        },

        // 点击搜索按钮
        handleQuery() {
            this.currentPage = 1;
            this.currentPage1 = 1;
            this.pageSize = 10;
            this.pageSize1 = 10;
            this.infoList = [];
            this.queryList();
        },

        // 按照人员搜索获取列表
        queryList() {
            this.loading = true;
            this.value = this.value ? this.value : 7;// TODO
            if (this.requestUser === 0) {
                this.queryUser(this.value);
                this.requestUser += 5;
            }
            const curTime = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
            this.dateRange = this.dateRange ? this.dateRange : curTime;
            const params = {
                offset: this.currentPage - 1, //  - 页码，选填，默认第一页
                limit: this.pageSize, //  - 每页数量，选填，默认20条
                username: this.user ? this.user.username : null, //  - 用户名称
                orgid: this.value, //  - 组织ID，选填
                month: this.dateRange, //  - 查询月度 选填，格式“yyyy-mm”
            };
            getList(params).then((res) => {
                const {
                    data,
                    code,
                    // info,
                } = res.data;
                if (code === 200) {
                    // window.console.log('data', data);

                    const {
                        // actTaskCount,
                        taskCount,
                        taskPerspective,
                        userCount,
                        userPerspective,
                        taskPerspectiveTotal,
                        userPerspectiveTotal,
                    } = data;
                    this.totolUser = taskCount;
                    this.totolTask = userCount;
                    if (this.active === 0) {
                        this.tableData = userPerspective;
                        this.totalNum = userPerspectiveTotal;
                    } else if (this.active === 1) {
                        this.tableData = taskPerspective;
                        this.totalNum = taskPerspectiveTotal;
                    }
                    this.loading = false;
                } else {
                    this.loading = false;
                }
            }).catch((err) => {
                this.loading = false;
                window.console.log(err);
            });
        },

        // 选择每页显示多少条
        handleSizeChange(val) {
            // console.log('page', val);
            this.pageSize = val;
            this.queryList();
        },

        // 选择页码改变
        handleCurrentChange(val) {
            // console.log('page', val);
            this.currentPage = val;
            this.queryList();
        },

        // 选择每页显示多少条
        handleSizeChange1(val) {
            // console.log('page', val);
            this.pageSize1 = val;
            this.getTaskDetail();
        },

        // 选择页码改变
        handleCurrentChange1(val) {
            // console.log('page', val);
            this.currentPage1 = val;
            this.getTaskDetail();
        },

        // 点击每一行弹出详情弹窗
        handleRowClick(row, column, event) {
            if (column.label === '操作') return;
            // window.console.log('每一行', row, column, event);
            this.taskInfoType = row.TASKTYPE ? row.TASKTYPE : null;
            this.taskInfoUser = !Number.isNaN(row.USERID) ? row.USERID : null;
            this.getTaskDetail();
        },

        // 点击请求数据 显示任务详情列表
        getTaskDetail() {
            this.infoLoading = true;
            let tasktype;
            this.taskTypes.forEach(type => {
                if (type.label === this.taskInfoType) {
                    tasktype = type.value;
                }
            });
            const params = {
                offset: this.currentPage1 - 1, //  - 页码，选填，默认第一页
                limit: this.pageSize1, //  - 每页数量，选填，默认20条
                userid: this.taskInfoUser, // - 用户ID
                tasktype, // this.taskInfoType, // - 任务类型
                month: this.dateRange, // 增加时间
            };
            getTaskInfo(params).then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const {
                        total,
                        rows,
                    } = data;
                    this.infoLoading = false;
                    this.infoList = rows;
                    this.totalNum1 = total;
                } else {
                    this.infoLoading = false;
                }
            }).catch((err) => {
                this.infoLoading = false;
                window.console.log(err);
            });
        },

        // 点击编辑任务
        /* actcount: 2
        count: 10
        id: "1"
        month: "2021-10"
        orgid: 7
        remark: null
        tasktype: 1
        type: null
        userid: 0
        username: "super" */
        handleEdit(row) {
            this.taskTitle = '编辑';
            this.taskVisible = true;
            this.taskid = row.id;
            this.taskForm.username = {
                ...row,
                userId: row.userid,
            };
            this.taskForm.actcount = row.actcount;
            this.taskForm.count = row.count;
            this.taskForm.month = row.month;
            this.taskForm.remark = row.remark;
            this.taskForm.orgid = row.orgid;
            this.taskForm.taskType = row.tasktype;
            this.taskForm.state = row.state;
            this.queryUser(row.orgid);
        },

        // 点击新建任务按钮
        addNewTask() {
            this.taskTitle = '新建';
            this.taskForm.month = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
            this.taskVisible = true;
            this.taskid = null;
            this.taskForm.state = 0;
        },

        // 新增修改任务 createNewTask
        /**
        * username: '',// 人员
        * type: '',// 任务分类 1-报告 2-作业
        * taskType: '', // 任务类型 小类型
        * count: '', // 量化数量
        * actcount: '', // 实际完成数量
        * month: '', // 统计月份
        * orgid: '', // 组织ID
        * remark: '', // 备注
         * taskType (1-ATP,
         * 2-BTM, 3-CIR,
         * 4-TCR, 5-LKJ,
         * 6-外观,
         * 7-一级修,
         * 8-二级修,
         * 9-高级修,
         * 10-数据分析)
         */
        modifyTask() {
            this.submitting = true;
            const params = {
                userid: this.taskForm.username.userId, // 人员id TODO
                ...this.taskForm,
                taskid: this.taskid,
                username: this.taskForm.username.username,
            };
            createNewTask(params).then((res) => {
                const {
                    code,
                    info,
                } = res.data;
                if (code === 200) {
                    this.submitting = false;
                    this.$message({
                        type: 'success',
                        message: `${info}`,
                    });
                    this.taskVisible = false;
                    this.queryList();
                    this.getTaskDetail();
                } else {
                    this.submitting = false;
                    this.$message({
                        type: 'error',
                        message: `${info}`,
                    });
                }
            }).catch((err) => {
                this.submitting = false;
                window.console.log(err);
            });
        },

        // 点击删除任务
        handleRemove(row) {
            this.$confirm('您将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                /* this.$message({
                    type: 'success',
                    message: '删除成功!',
                }); */
                this.taskid = row.id;
                this.removeTask();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                });
            });
        },

        // 删除任务
        removeTask() {
            const params = {
                taskid: this.taskid,
            };
            removeTask(params).then((res) => {
                const {
                    code,
                    info,
                } = res.data;
                if (code === 200) {
                    this.$message({
                        type: 'success',
                        message: `${info}`,
                    });
                    this.getTaskDetail();
                    this.queryList();
                } else {
                    this.$message({
                        type: 'error',
                        message: `${info}`,
                    });
                }
            }).catch((err) => {
                window.console.log(err);
            });
        },

        // 点击确定按钮 首先判断是编辑还是新增
        handleConfirmTask() {
            this.$nextTick(() => {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.modifyTask();
                    } else {
                        return false;
                    }
                });
            });
        },

        // 获取字典数据
        getDictData() {
            getDict().then((res) => {
                // window.console.log('dit', res);
                const {
                    data,
                    code,
                } = res;
                if (code === 200) {
                    const arr = [];
                    Object.keys(data).forEach((key) => {
                        arr.push({
                            label: data[key],
                            value: key,
                        });
                    });
                    this.taskTypes = arr;
                }
            }).catch((err) => {
                window.console.log(err);
            });
        },
    },
    created() {
        this.queryList();
        this.queryOrgs();
        this.getDictData();
    },
};
</script>
<style lang='scss'>
.static-num {
    font-size: 16px;
    color: #fff;
    line-height: 40px;
}

.modifyModal {
    .el-form-item__content {
        margin-left: 0!important;
    }

    .el-select,
    .el-date-editor,
    .el-range-editor{
        width: 100%;
    }
}
</style>
